<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>User表</title>
<script src="../../js/layui/layui.js"></script>
<link rel="stylesheet" href="../../js/layui/css/layui.css" media="all" />

</head>
<body>
	<blockquote class="layui-elem-quote news_search">
		<form class="layui-form" onsubmit="return false;">
			<label class="layui-form-mid">用户名:</label>
			<div class="layui-input-inline">
				<input type="text" id="name" name="u_name" placeholder="请输入用户"
					autocomplete="off" class="layui-input  search_input">
			</div>

			<div class="layui-input-inline">
				<button class="layui-btn" lay-submit lay-filter="formDemo">搜索</button>
				<button class="layui-btn" lay-submit onclick="addUser()">添加</button>
			</div>
		</form>
	</blockquote>

	<table class="layui-table" lay-filter="test" id="demo"
		lay-filter="table"></table>


	<script type="text/javascript">
		var json;
		layui.use(['table','form','laydate','layer'], function(){
		  var table = layui.table;
		  var form = layui.form;
		  var laydate = layui.laydate;
		  var layer = layui.layer;
		  var $ = layui.$;
		  
		  //第一个实例
		  table.render({
		    elem: '#demo'
		    ,height: 312
		    ,url: 'http://localhost:8080/FiveClothes/user/allUser' //数据接口
		    ,page: true //开启分页
		    ,limits:[2,3,4]
		    ,cols: [[ //表头
		      {field: 'u_id', title: 'ID'}
		      ,{field: 'u_name', title: '账号'}
		      ,{field: 'u_password', title: '密码'}
		      ,{field: 'right', align:'center',toolbar:'#barDemo'}
		    ]]
		    ,id:'idTest'
		  });
		  
		  form.on('submit(formDemo)', function(data){
			  table.reload('idTest', {
				  where:data.field
				  ,page: {
	                    curr: 1 //重新从第 1 页开始
	                  }
				});
			  return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
			});
		 //监听工具条
		  table.on('tool(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
		    var data = obj.data; //获得当前行数据
		    var layEvent = obj.event; //获得 lay-event 对应的值
		   
		    if(layEvent === 'del'){ //删除
		      layer.confirm('真的删除行么', function(index){
		    	  $.post('http://localhost:8080/FiveClothes/user/delUser',{"u_id":data.u_id},
						  function(res){
		    		  			var msg;
					  			if(res){
					  				msg="删除成功"
					  			}else{
					  				msg="删除失败"
					  			}
					  			layer.msg(msg, {
						  			  icon: 1,
						  			  time: 2000 //2秒关闭（如果不配置，默认是3秒）
						  			}, function(){
										 window.location.reload();//刷新父页面
						  			}); 
					  			 
					  },'json');
		    	  layer.close(index);
		      });
		    } else if(layEvent === 'edit'){ //编辑
		    	json = JSON.stringify(data);
		    	layer.open({
					 type: 2, 
					 content: 'updateUser.html',
					 area: ['350px','250px']
				}); 
		    }
		  });
		});
		
		//添加User
		function addUser(){
			layer.open({
			 type: 2, 
			 content: 'addUser.html',
			 area: ['350px','250px']
			}); 
		}
	 </script>
	<script type="text/html" id="barDemo">
  		<a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>
  		<a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>
	</script>
</body>
</html>